<template>
  <el-row :gutter="24" class="pl80">
    <el-row>
      <el-col>
        <h2>
          住房情况
          <el-tooltip class="item mr10" effect="dark" content="保存" placement="top">
            <el-button
              class="fr"
              size="small"
              type="primary"
              icon="el-icon-folder-checked"
              @click="handleAllSave"
            />
          </el-tooltip>
          <el-tooltip class="item mr10" effect="dark" content="打印" placement="top">
            <el-button size="small" class="fr" icon="el-icon-s-open" @click="handlePrint" />
          </el-tooltip>
        </h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane
            v-for="(item,index) in tableData"
            :key="index"
            :label="item.familyAppellationName"
            :name="item.userHouseId"
          ></el-tab-pane>
          <el-tab-pane label="新增" name="add"></el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-row :gutter="16" v-if="activeName === 'add'">
      <el-form :model="form" :rules="rules" ref="form" label-width="130px">
        <el-col :span="8">
          <el-form-item label="家庭成员姓名" prop="familyName">
            <el-input v-model="form.familyName" placeholder="请输入家庭成员姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="家庭成员称谓" prop="familyAppellation">
            <el-select clearable v-model="form.familyAppellation" placeholder="请选择">
              <el-option
                v-for="(item,index) in familyArr"
                :key="index"
                :label="item.title"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="家庭成员工作单位">
            <el-input v-model="form.familyWorkUnit" placeholder="请输入家庭成员工作单位" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row class="mb20">
      <el-col>
        <el-card shadow="never">
          <div slot="header">
            现居住地情况
            <el-button
              size="small"
              v-if=" tableData1.length < 1 "
              type="primary"
              icon="el-icon-plus"
              @click="handleEdit(false, {}, 'now')"
            />
          </div>
          <e-table
            ref="eTable"
            @getList="handleGetList"
            :tableData="tableData1"
            :columns="columns1"
            :loading="loading"
            :pageObj="null"
          >
            <el-table-column slot="action" fixed="right" width="50" align="center">
              <template slot-scope="scope">
                <el-dropdown>
                  <a class="el-dropdown-link">
                    <i class="el-icon-menu"></i>
                  </a>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleEdit(true, scope.row, 'now')">
                      <a>修改</a>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="handleDelete(scope.row, 'now')">
                      <a class="red">删除</a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </e-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mb20">
      <el-col>
        <el-card shadow="never">
          <div slot="header">
            房屋购买情况
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="handleEdit(false, {}, 'buy')"
            />
          </div>
          <e-table
            ref="eTable"
            @getList="handleGetList"
            :tableData="buyHouse"
            :columns="buyHouseColumns"
            :loading="loading"
            :pageObj="null"
          >
            <el-table-column slot="action" fixed="right" width="50" align="center">
              <template slot-scope="scope">
                <el-dropdown>
                  <a class="el-dropdown-link">
                    <i class="el-icon-menu"></i>
                  </a>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleEdit(true, scope.row, 'buy')">
                      <a>修改</a>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="handleDelete(scope.row, 'buy')">
                      <a class="red">删除</a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </e-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mb20">
      <el-col>
        <el-card shadow="never">
          <div slot="header">
            房屋出售情况
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="handleEdit(false, {}, 'sale')"
            />
          </div>
          <e-table
            ref="eTable"
            @getList="handleGetList"
            :tableData="saleHouse"
            :columns="saleHouseColumns"
            :loading="loading"
            :pageObj="null"
          >
            <el-table-column slot="action" fixed="right" width="50" align="center">
              <template slot-scope="scope">
                <el-dropdown>
                  <a class="el-dropdown-link">
                    <i class="el-icon-menu"></i>
                  </a>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleEdit(true, scope.row, 'sale')">
                      <a>修改</a>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="handleDelete(scope.row, 'sale')">
                      <a class="red">删除</a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </e-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mb20">
      <el-col>
        <el-card shadow="never">
          <div slot="header">
            房屋出租情况
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="handleEdit(false, {}, 'rent')"
            />
          </div>
          <e-table
            ref="eTable"
            @getList="handleGetList"
            :tableData="rentHouse"
            :columns="rentHouseColumns"
            :loading="loading"
            :pageObj="null"
          >
            <el-table-column slot="action" fixed="right" width="50" align="center">
              <template slot-scope="scope">
                <el-dropdown>
                  <a class="el-dropdown-link">
                    <i class="el-icon-menu"></i>
                  </a>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleEdit(true, scope.row, 'rent')">
                      <a>修改</a>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="handleDelete(scope.row, 'rent')">
                      <a class="red">删除</a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </e-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="never">
          <div slot="header">
            参与集资建房情况
            <el-button type="primary" icon="el-icon-plus" @click="handleEdit(false, {}, 'build')" />
          </div>
          <e-table
            ref="eTable"
            @getList="handleGetList"
            :tableData="buildHouse"
            :columns="buildHouseColumns"
            :loading="loading"
            :pageObj="null"
          >
            <el-table-column slot="action" fixed="right" width="50" align="center">
              <template slot-scope="scope">
                <el-dropdown>
                  <a class="el-dropdown-link">
                    <i class="el-icon-menu"></i>
                  </a>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleEdit(true, scope.row, 'build')">
                      <a>修改</a>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="handleDelete(scope.row, 'build')">
                      <a class="red">删除</a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </e-table>
        </el-card>
      </el-col>
    </el-row>
    <house-modal ref="houseModal" @refresh="handleRefresh" />
  </el-row>
</template>

<script>
import { getUserHouse, deleteUserHouse, createUserHouse, updateUserHouse } from '@/api/archives'
import { setSession, getSession, openNotification, getDicData, serviceParam } from '@/utils/util'
import HouseModal from './HouseModal'

export default {
  components: {
    HouseModal
  },
  data() {
    return {
      activeName: null,
      loading: false,
      tableData: [],
      columns1: [
        {
          label: '地址(具体到街道、幢、室)',
          prop: 'houseAdr'
        },
        {
          label: '建筑面积',
          prop: 'houseFloorage'
        },
        {
          label: '房屋性质',
          prop: 'houseNature'
        },
        {
          label: '房屋来源',
          prop: 'houseSource'
        },
        {
          label: '产权人',
          prop: 'houseOwner'
        },
        {
          label: '其他情况',
          prop: 'otherRemark'
        },
        {
          label: '备注',
          prop: 'remark'
        },
        {
          slot: 'action'
        }
      ],
      tableData1: [],
      buyHouseColumns: [
        {
          label: '房屋地址',
          prop: 'adr'
        },
        {
          label: '建筑面积',
          prop: 'floorage'
        },
        {
          label: '房屋性质',
          prop: 'nature'
        },
        {
          label: '购房时间',
          prop: 'buyDate'
        },
        {
          label: '购房金额',
          prop: 'buyMoney'
        },
        { slot: 'action' }
      ],
      buyHouse: [],
      saleHouseColumns: [
        {
          label: '房屋地址',
          prop: 'adr'
        },
        {
          label: '建筑面积',
          prop: 'floorage'
        },
        {
          label: '房屋性质',
          prop: 'nature'
        },
        {
          label: '售房时间',
          prop: 'saleDate'
        },
        {
          label: '售房金额',
          prop: 'saleMoney'
        },
        { slot: 'action' }
      ],
      saleHouse: [],
      rentHouseColumns: [
        {
          label: '房屋地址',
          prop: 'adr'
        },
        {
          label: '建筑面积',
          prop: 'floorage'
        },
        {
          label: '房屋性质',
          prop: 'nature'
        },
        {
          label: '租赁期限',
          prop: 'deadline'
        },
        {
          label: '年租金',
          prop: 'yearMoney'
        },
        { slot: 'action' }
      ],
      rentHouse: [],
      buildHouseColumns: [
        {
          label: '房屋地址',
          prop: 'adr'
        },
        {
          label: '建筑面积',
          prop: 'floorage'
        },
        {
          label: '集资单位',
          prop: 'buildUnit'
        },
        {
          label: '房款总额',
          prop: 'buildMoney'
        },
        {
          label: '个人支付',
          prop: 'invest'
        },
        { slot: 'action' }
      ],
      buildHouse: [],
      columns: [
        {
          label: '家庭成员称谓',
          prop: 'familyAppellation'
        },
        {
          label: '家庭成员姓名',
          prop: 'familyName'
        },
        {
          label: '家庭成员工作单位',
          prop: 'familyWorkUnit'
        },
        {
          label: '自住房屋地址',
          prop: 'houseAdr'
        },
        {
          label: '房屋建筑面积',
          prop: 'houseFloorage'
        },
        {
          label: '房屋性质',
          prop: 'houseNature'
        },
        {
          label: '产权人',
          prop: 'houseOwner'
        },
        {
          label: '自住房屋来源',
          prop: 'houseSource'
        },
        {
          label: '其他情况',
          prop: 'otherRemark'
        },
        {
          label: '备注',
          prop: 'remark'
        },
        {
          label: '出租房屋信息',
          prop: 'rentHouse'
        },
        {
          label: '出售房屋信息',
          prop: 'saleHouse'
        },
        {
          label: '集资建房信息',
          prop: 'buildHouse'
        },
        {
          label: '购买房屋信息',
          prop: 'buyHouse'
        },
        { slot: 'action' }
      ],
      form: {},
      rules: {
        familyAppellation: [{ required: true, message: '请选择家庭成员称谓', trigger: 'blur' }],
        familyName: [{ required: true, message: '请输入家庭成员姓名', trigger: 'blur' }]
      },
      familyArr: [],
      leaderRow: JSON.parse(this.$route.query.leaderRow)
    }
  },
  methods: {
    handlePrint() {
      let obj = serviceParam('serverUrl')
      let uri = process.env.NODE_ENV === 'production' ? obj.paraValue : 'http://192.168.14.2:8888/'
      window.open(uri + 'ureport/preview?_u=2:user_house&userId=' + this.leaderRow.userId)
    },
    handleTabClick(tab, e) {
      console.log('e', this.activeName)

      if (this.activeName === 'add') {
        this.tableData1 = []
        this.buildHouse = []
        this.buyHouse = []
        this.rentHouse = []
        this.saleHouse = []
      } else {
        const index = this.tableData.findIndex(v => v.userHouseId === this.activeName)
        this.handleData(this.tableData[index])
      }
    },
    // 顶上保存按钮
    async handleAllSave() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          let res = null,
            mes = null
          this.form = Object.assign({}, this.form, this.tableData1[0])
          let arr = []
          arr = arr.concat(this.buildHouse, this.buyHouse, this.rentHouse, this.saleHouse)
          console.log('arr', arr)
          this.$set(this.form, 'userHouseDetailVO', arr)
          this.$set(this.form, 'userId', this.leaderRow.userId)

          console.log('form', this.form)

          if (this.activeName !== 'add') {
            res = await updateUserHouse(this.form)
            mes = '修改住房信息成功'
          } else {
            res = await createUserHouse(this.form)
            mes = '新增住房信息成功'
          }

          if (res.state === '000000') {
            openNotification('success', mes)
          }
        }
      })
    },
    addId(arr) {
      arr.map((v, i) => {
        v.xmId = 'xm' + Number(i + 1)
      })
    },
    handleRefresh(obj, type, bool) {
      console.log('type', obj, type)
      let arr = null,
        num = null
      if (type === 'buy') {
        arr = 'buyHouse'
        num = 0
      } else if (type === 'rent') {
        arr = 'rentHouse'
        num = 2
      } else if (type === 'sale') {
        arr = 'saleHouse'
        num = 1
      } else if (type === 'build') {
        arr = 'buildHouse'
        num = 3
      } else if (type === 'now') {
        arr = 'tableData1'
      }
      if (!bool) {
        if (this.type !== 'now') {
          this[arr].push({ ...obj, xmId: 'xm' + Number(this[arr].length + 1), type: num })
        } else {
          this[arr].push({ ...obj, xmId: 'xm' + Number(this[arr].length + 1) })
        }
      } else {
        const index = this[arr].findIndex(v => v.xmId === obj.xmId)
        this[arr].splice(index, 1, obj)
      }
    },
    handleTagClick(item) {
      console.log('item', item)
      const index = this.tableData.findIndex(v => v.familyId === item.familyId)
      this.handleData(this.tableData[index])
    },
    handleShowHistory() {
      this.$emit('showHistory', 'family')
    },
    handleEdit(bool, row, type) {
      this.$nextTick(() => {
        this.$refs.houseModal.edit(bool, row, type)
      })
    },
    handleDelete(row, type) {
      let arr = null
      if (type === 'buy') {
        arr = 'buyHouse'
      } else if (type === 'rent') {
        arr = 'rentHouse'
      } else if (type === 'sale') {
        arr = 'saleHouse'
      } else if (type === 'build') {
        arr = 'buildHouse'
      } else if (type === 'now') {
        arr = 'tableData1'
      }
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const index = _this[arr].findIndex(v => v.xmId === row.xmId)
          _this[arr].splice(index, 1)
        }
      })
    },
    // 处理数据赋值，点击tag也会调用
    handleData(data) {
      this.tableData1 = [] // 先清空一下
      this.buildHouse = []
      this.buyHouse = []
      this.rentHouse = []
      this.saleHouse = []
      this.tableData1.push(data)
      data.userHouseDetailVO.map(v => {
        if (v.type === 0) {
          this.buyHouse.push(v)
        } else if (v.type === 1) {
          this.saleHouse.push(v)
        } else if (v.type === 2) {
          this.rentHouse.push(v)
        } else if (v.type === 3) {
          this.buildHouse.push(v)
        }
      })
      this.addId(this.buyHouse)
      this.addId(this.buildHouse)
      this.addId(this.saleHouse)
      this.addId(this.rentHouse)
    },
    async handleGetList(id, param = {}) {
      this.loading = true
      const res = await getUserHouse(id, param)
      if (res && res.data.length > 0) {
        const { state, data } = res
        this.tableData = data
        this.activeName = data[0].userHouseId
        this.handleData(data[0])
      } else {
        this.tableData = []
      }
      this.loading = false
    }
  },
  created() {
    this.familyArr = getDicData('001', '001014')
    if (this.leaderRow) {
      setSession('leaderRow', this.leaderRow)
    }
    this.handleGetList(this.leaderRow.userId)
  }
}
</script>

<style scoped>
.now-stay {
  height: 106px;
  padding: 10px;
  text-align: center;
  border: 1px solid #ebeef5;
  border-right: none;
}
</style>
